<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			/*如果对当前元素仅仅设置相对定位，那么与标准流下的盒子没有什么区别*/
			position: relative;
			/*设置相对定位 我们就可以使用四个方向的属性  top left right bottom

			相对定位：相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。相对定位仅仅的微调我们元素的位置
			*/
			top: 20px;
			left: 30px;
		}
	</style>
</head>
<body>

	<!-- 定位有三种： 1.相对定位 2.绝对定位 3.固定定位
		这三种定位，每种定位都暗藏玄机，所以我们要一一单讲

		position:relative;
		position:absolute;
		position:fixed;



	 -->

	 <div class="box1"></div>



	
</body>
</html>